<template>
  <div>
    <canvas style="border: 1px solid red" width="800" height="500"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  mounted() {
    this.getCanvas()
  },
  methods: {
    getCanvas() {
      // 1.拿到canvas
      let oCanvas = document.querySelector("canvas");
      // 2.从canvas中拿到绘图工具
      let oCtx = oCanvas.getContext("2d");
      // 3.定义变量保存小方格的尺寸
      let gridSize = 50;
      // 4.拿到canvas的宽高
      let canvasWidth = oCtx.canvas.width;
      let canvasHeight = oCtx.canvas.height;
      // 5.计算在垂直方向和水平方向可以绘制多少条横线
      let row = Math.floor(canvasHeight / gridSize);
      let col = Math.floor(canvasWidth / gridSize);
      // 6.绘制垂直方向的横线
      for (let i = 0; i < row; i++) {
        oCtx.beginPath();
        oCtx.moveTo(0, i * gridSize - 0.5);
        oCtx.lineTo(canvasWidth, i * gridSize - 0.5);
        oCtx.strokeStyle = "#FFF";
        oCtx.stroke();
      }
      // 7.绘制水平方向的横线
      for (let i = 0; i < col; i++) {
        oCtx.beginPath();
        oCtx.moveTo(i * gridSize - 0.5, 0);
        oCtx.lineTo(i * gridSize - 0.5, canvasHeight);
        oCtx.strokeStyle = "#FFF";
        oCtx.stroke();
      }
    }
  }

}
</script>

<style scoped>
canvas {
  background: #e8e9ee;
}
</style>